<template>
  <t-dialog
    v-model:visible="show"
    :width="1100"
    :header="formData.id ? $t('common.update') : $t('common.create')"
    :onConfirm="() => form.submit()"
    destroyOnClose
    :closeOnOverlayClick="false"
  >
    <template #body>
      <div style="overflow: hidden;">
        <t-row :gutter="30">
          <t-col :span="8">
            <Permission v-model:permission="formData.permission" v-model:plugin="formData.plugin" />
          </t-col>
          <t-col :span="4">
            <t-form ref="form" :data="formData" :rules="formRule" label-align="top" @submit="onSubmit">
              <t-form-item :label="lang.t('name')" name="name">
                <t-input v-model="formData.name"/>
              </t-form-item>
              <t-form-item :label="lang.t('phone')" name="phone">
                <t-input v-model="formData.phone"/>
              </t-form-item>
              <t-form-item :label="lang.t('username')" name="username">
                <t-input v-model="formData.username"/>
              </t-form-item>
              <t-form-item :label="lang.t('password')" name="password">
                <t-input v-model="formData.password" type="password" :maxlength="6"/>
              </t-form-item>
              <t-form-item :label="lang.t('status')" name="status">
                <t-select v-model="formData.status">
                  <t-option
                    v-for="(status, index) in lang.tm('status_text')"
                    :key="index"
                    :label="status"
                    :value="index">
                  </t-option>
                </t-select>
              </t-form-item>
            </t-form>
          </t-col>
        </t-row>
      </div>
    </template>
    <template #footer>
      <t-button theme="primary" :loading="loading" @click="form.submit()">
        {{ formData.id ? $t('common.update') : $t('common.create') }}
      </t-button>
    </template>
  </t-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import userStore from '@/store/user'
  import { accountUpdate } from '@/api/manage/user'
  import Permission from './permission.vue'

  const emit = defineEmits(['get'])
  const lang = app.lang.space('page.user.account')


  const show = ref(false)
  const loading = ref(false)
  const form = ref(null)
  const formData = ref({})
  const formRule = {
    name: [{ required: true, message: ' ', type: 'error' }],
    phone: [{ required: true, message: ' ', type: 'error' }],
    username: [{ required: true, message: ' ', type: 'error' }],
    status: [{ required: true, message: ' ', type: 'error' }],
  }
  const open = data => {
    formData.value = Object.assign({
      name: '', 
      phone: '', 
      username: '',
      password: '',
      status: 0, 
      permission: [],
      plugin: []
    }, data)
    show.value = true
  }

  const onSubmit = ({ validateResult }) => {
    if (validateResult === true) {
      loading.value = true
      accountUpdate(formData.value).then(res => {
        emit('get')
        show.value = false
        app.message('success', 'message.' + res.message)
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }

  defineExpose({ open })
</script>